<extend name="Public:base"/>
<block name="body">
    <style type="text/css">
        * {
            list-style: none;
        }

        #body {

            width: 95%;

            background: white;

            border-radius: 10px;

            margin: 2.5%;

            position: relative;

        }

        .add_button {
            margin: 20px 30px;
            height: 40px;
            width: 80px;
        }

        .top_input_button {

            width: 300px;

            height: 42px;

        }

        .btn-default {

            color: #fff;

            background-image: none;

            background-color: rgba(255, 150, 47, 1);

            border: none;

        }

        .btn-default:focus, .btn-default:hover {

            color: #fff;

            background-image: none;

            border: none;

            background-color: rgba(255, 150, 47, 1);

        }

        tr > td > span {

            margin: 5px;

            color: #00aaee;

        }

        thead > tr > th {

            text-align: center;

        }

        #data_tr > td {

            text-align: center;

        }

        form ul > li {
            margin: 10px;
        }

        #table_form > div {
            padding: 10px;
        }

        .file-box {
            display: inline-block;
            position: relative;
            top: 15px;
            padding: 3px 5px;
            overflow: hidden;
            border: solid 1px #ccc;
            border-radius: 8px;
            text-align: center;
        }

        .file-btn {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 15px;
            left: 0;
            outline: none;
            background-color: transparent;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            opacity: 0;
        }


    </style>

    <div id="body">

        <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-default add_button ">添加</button>

        <!-- 模态框（Modal） -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"

             aria-hidden="true">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">添加</h4>
                    </div>
                    <div class="modal-body">
                        <form id="table_form" action="" enctype="multipart/form-data" onsubmit="return false">

                            <div class="input-group input-group-lg">
                                <span class="input-group-addon"><span style="color: red">*</span>活动名称</span>
                                <input type="text" class="form-control" id="name" aria-describedby="sizing-addon1">
                            </div>
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon"><span style="color: red">*</span>活动时间</span>
                                <input type="text" class="form-control" id="time" aria-describedby="sizing-addon1">
                                <span class="input-group-addon">小时</span>
                            </div>
                            &nbsp;&nbsp;<span><span style="color: red">*</span>活动封面:</span>
                            <div class="file-box">
                                <input type="file" id="cover_img" class="file-btn"/>
                                选择上传文件
                            </div>
							<img id="cove" src="" width="200px">
							<div style="color: red">支持jpg/png，图片建议大小750*264px，不超过1M</div>
							<br/>
							&nbsp;&nbsp;<span><span style="color: red">*</span>活动详情:</span>
                            <div class="file-box">
                                <input type="file" id="cover1_img" class="file-btn"/>
                                选择上传文件
                            </div>
                            <img id="cove1" src="" width="200px">
                            <div style="color: red">支持jpg/png，图片建议大小750*264px，不超过1M</div>
                            <div class="input-group input-group-lg" style="margin-top: 20px;">
                                <span class="input-group-addon" id="sizing-addon1"><span
                                        style="color: red">*</span>原价</span>
                                <input type="text" class="form-control" id="price" aria-describedby="sizing-addon1">
                            </div>

                            <div>&nbsp;&nbsp;<span style="color: red">*</span>活动领取详情：
                                <input class="load" type="radio" name="load" value="1" checked>文件下载 <span id="file_name"></span></div>
                            <div class="file-box" id="div_load_file">
                                <input type="file" id="load_file" class="file-btn"/>选择上传文件
                                <span style="color: red">支持所有文件类型，文件大小不超过2M</span>
                            </div>
                            <br>

                            <div style="width: 100%">
                                <div style="float: left"><input class="load"style="margin-left: 115px;margin-top: 10px;"type="radio" name="load" value="2">图片展示
                                </div>
                                <div style="float: left"><img id="file_img" src="" width="200px"></div>
                            </div>

                            <div class="file-box" id="div_load_img" style="width: 100%">
                                <input type="file" id="load_img" class="file-btn"/>
                                选择上传文件<span style="color: red">支持jpg/png,不超过1M</span>
                            </div>
                            <br>
                            &nbsp;&nbsp;<span style="color: red">*</span>模式： <input id="pattern" type="radio"
                                                                                    name="pattern" value="1" checked>获取手机号

                            <p style="text-align: center">
                                <button type="button" data-dismiss="modal" class="btn add_button ">取消</button>
                                <button type="button" id="add_but" class="btn btn-default add_button ">添加</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div style="position: absolute;right: 115px;top:20px">
            <input type="text" id="like_code" class="form-control top_input_button" placeholder="请输入活动项目名称"
                   aria-describedby="sizing-addon1">
        </div>
        <div style="position: absolute;right: 20px;top:0">
            <button type="button" id="like" class="btn btn-default  add_button" style="width: 60px">查询</button>
        </div>
        <ul class="nav nav-tabs" style="margin: 30px;">
            <li role="presentation" class="active"><a href="#">资料列表</a></li>
            <li role="presentation"><a href="{:U('project/video')}">视频列表</a></li>
            <li role="presentation"><a href="{:U('project/advertise')}">广告列表</a></li>
            <li role="presentation"><a href="{:U('project/recycle')}">回收站</a></li>
        </ul>
        <div class="row" style="margin-left: 15px;width: 97%">
            <form id="form" method="post" action="" onsubmit="return false">
                <div class="col-xs-12">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th class="center"><input class="check-all" type="checkbox" value=""></th>
                            <th>编号</th>
                            <th>活动名称</th>
                            <th>活动时间（h）</th>
                            <th>模式</th>
                            <th>发布时间</th>
                            <th>状态</th>
                            <th>参与总人数</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody>

                        <volist name="data" id="vo">
                            <tr id="data_tr" style="overflow: hidden">
                                <td class="center">
                                    <input class="uids" type="checkbox" name="uids[]" value="{$vo.id}">
                                </td>
                                <td>{$vo.id}</td>
                                <td>{$vo.name}</td>
                                <td>{$vo.ontime}</td>
                                <td>{$vo.pattern}</td>
                                <td>{$vo.time}</td>
                                <td>{$vo.type}</td>
                                <td>{$vo.user}</td>
                                <td>
                                    <span onclick="group_table('{$vo.id}','edit')">编辑</span>
                                    <span onclick="group_table('{$vo.id}','auth')">参与人员列表</span>
                                    <span onclick="group_table('{$vo.id}','del')">删除 </span>
                                </td>
                            </tr>
                        </volist>
                        </tbody>
                    </table>
                    <button type="button" id="submit" class="btn add_button" style="width: 60px">删除</button>
                    {$page}
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </form>
        </div>
    </div>
    <script>
        var cover_img = '';
        var cover1_img = '';
        var load_file = '';
        var load_img = '';
        var fileCover = document.querySelector("#cover_img");
        var fileCover1 = document.querySelector("#cover1_img");
        var loadFile = document.querySelector("#load_file");
        var loadImg = document.querySelector("#load_img");

        $("#cover_img").on("change", function () {
            upload(fileCover, 1);
        });
		$("#cover1_img").on("change", function () {
            upload(fileCover1, 4);
        });
        $("#load_file").on("change", function () {
            upload(loadFile, 2);
        });
        $("#load_img").on("change", function () {
            upload(loadImg, 3);
        });

        $(document).ready(function () {
            $('input[name="load"]').change(function () {
                if (this.value === '1') {
                    $('#div_load_img').css('display', 'none');
                    $('#div_load_file').css('display', 'block');
                    $('#file_name').css('display', 'block');
                    $('#file_img').css('display', 'none');
                }
                else if (this.value === '2') {
                    $('#div_load_file').css('display', 'none');
                    $('#div_load_img').css('display', 'block');
                    $('#file_name').css('display', 'none');
                    $('#file_img').css('display', 'block');
                }
            });
        });
        $(function () {
            load = $(" input[name='load']:checked").val();
            if (load === '1') {
                $('#div_load_img').css('display', 'none');
                $('#div_load_file').css('display', 'block');
            } else if (load === '2') {
                $('#div_load_file').css('display', 'none');
                $('#div_load_img').css('display', 'block');
            }
        });

        function upload(file, key) {
            var fileObj = file.files[0];
            var formData = new FormData();
            formData.append('file', fileObj);
            $.ajax({
                url: 'upload',
                type: 'post',
                contentType: false,
                data: formData,
                processData: false,
                success: function (res) {
                    if (res.code) {
                        if (key === 1) {
                            cover_img = res.url;
                            $('#cove').attr('src', '/' + cover_img);
                        } else if (key === 2) {
                            load_file = res.url;
                            $('#file_name').text(load_file.substr(17, 14));
                        } else if (key === 3) {
                            load_img = res.url;
                            $('#file_img').attr('src', '/' + load_img);
                        } else if (key === 4) {
                            cover1_img = res.url;
                            $('#cove1').attr('src', '/' + cover1_img);
                        }
                    } else {
                        bootbox.alert({title: "系统提示", message: res.msg});
                    }
                }
            });
        }

        $('#add_but').click(function () {
            var name = $('#name').val();
            var time = $('#time').val();
            var price = $('#price').val();
            var load = $(" input[name='load']:checked").val();
            var pattern = $("input[name='pattern']:checked").val();
            if (load === '1') {
                fileUrl = load_file;
            } else {
                fileUrl = load_img;
            }
            if (name !== '' && time !== '' && price !== '' && load !== '' && fileUrl !== '' && cover_img !== '' && cover1_img !== '') {
                $.post('data', {
                    name: name,
                    ontime: time,
                    pattern: pattern,
                    cover: cover_img,
                    cover1: cover1_img,
                    price: price,
                    fileurl: fileUrl,
                    download: load,
                    key: 'add'
                }, function (res) {
                    if (res.code) {
                        bootbox.alert({title: "系统提示", message: res.msg});
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        bootbox.alert({title: "系统提示", message: res.msg});
                    }
                })
            } else {
                bootbox.alert({title: "系统提示", message: '请填入完整的信息'});
            }
        });

        function group_table(id, event) {
            if (event === 'edit') {
                $.post('data', {id: id, key: 'select'}, function (res) {
                    var img = res.download === '1' ? 'checked' : '';
                    var file = res.download === '2' ? 'checked' : '';
                    var dis = res.download === '1' ? 'style="display:none"' : '';
                    var imgUrl = res.download === '2' ? res.fileurl : '';
                    var fileName = res.download === '1' ? res.fileurl.substr(17, 14) : '';
                    bootbox.dialog({
                        message: '<form id="table_form" action="" enctype="multipart/form-data" onsubmit="return false">' +
                            '<div class="input-group input-group-lg">' +
                            '<span class="input-group-addon"><span style="color: red">*</span>活动名称</span>' +
                            '<input type="text" class="form-control" id="edit_name" value="' + res.name + '" aria-describedby="sizing-addon1">' +
                            '</div>' +
                            '<div class="input-group input-group-lg">' +
                            '<span class="input-group-addon"><span style="color: red">*</span>活动时间</span>' +
                            '<input type="text" class="form-control" id="edit_time" value="' + res.ontime + '" aria-describedby="sizing-addon1">' +
                            '<span class="input-group-addon">小时</span>' +
                            '</div>' +
                            '&nbsp;&nbsp;<span><span style="color: red">*</span>活动封面:</span>' +
                            '<div class="file-box" id="edit_cover">' +
                            '<input type="file" id="edit_cover_img" class="file-btn"/>' +
                            ' 选择上传文件' +
                            '</div>' +
                            '<img id="edit_cove" src="/' + res.cover + '" width="200px">' +
                            '<div style="color: red">支持jpg/png，图片建议大小750*264px，不超过1M</div>' +
							'&nbsp;&nbsp;<span><span style="color: red">*</span>活动详情:</span>' +
                            '<div class="file-box" id="edit_cover">' +
                            '<input type="file" id="edit_cover1_img" class="file-btn"/>' +
                            ' 选择上传文件' +
                            '</div>' +
                            '<img id="edit_cove1" src="/' + res.cover1 + '" width="200px">' +
                            '<div style="color: red">支持jpg/png，图片建议大小750*264px，不超过1M</div>' +
                            '<div class="input-group input-group-lg" style="margin-top: 20px;">' +
                            '<span class="input-group-addon" id="sizing-addon1"><span style="color: red">*</span>原价</span>' +
                            '<input type="text" class="form-control" id="edit_price" value="' + res.price + '" aria-describedby="sizing-addon1">' +
                            '</div>' +
                            '&nbsp;&nbsp;<span style="color: red">*</span>活动领取详情：' +
                            '<input type="radio" name="edit_load" value="1" ' + img + '>' +
                            '文件下载  <span id="edit_file_name">' + fileName + '</span>' +
                            '<div class="file-box" id="div_edit_load_file">' +
                            '<input id="edit_load_file" type="file" class="file-btn"/>' +
                            '选择上传文件<span style="color: red">支持所有文件类型，文件大小不超过2M</span>' +
                            '</div>' +
                            '<br>' +
                            '<input style="margin-left: 115px;margin-top: 10px;" type="radio" name="edit_load" value="2" ' + file + '>图片展示' +
                            '<img id="edit_file_url" src="/' + imgUrl + '" ' + dis + ' width="200px"><br/>' +
                            '<div class="file-box" id="div_edit_load_img">' +
                            '<input id="edit_load_img" type="file" class="file-btn"/>' +
                            '选择上传文件<span style="color: red">支持jpg/png,不超过1M</span>' +
                            '</div><br/>' +
                            '&nbsp;&nbsp;<span style="color: red">*</span>模式：<input type="radio" name="edit_pattern" value="1" checked>获取手机号' +
                            '</form>',
                        title: "编辑",
                        buttons: {
                            success: {
                                label: "关闭",
                                className: "btn-danger",
                                callback: function () {
                                }
                            },
                            "Danger": {
                                label: "确认",
                                className: "btn-success",
                                callback: function () {
                                    but();
                                }
                            }
                        }
                    });
                    var cover_img = '';
                    var cover1_img = '';
                    var load_file = '';
                    var load_img = '';
                    var fileCover = document.querySelector("#edit_cover_img");
                    var fileCover1 = document.querySelector("#edit_cover1_img");
                    var loadFile = document.querySelector("#edit_load_file");
                    var loadImg = document.querySelector("#edit_load_img");

                    $("#edit_cover_img").on("change", function () {
                        upload(fileCover, 1);
                    });
					$("#edit_cover1_img").on("change", function () {
                        upload(fileCover1, 4);
                    });
                    $("#edit_load_file").on("change", function () {
                        upload(loadFile, 2);
                    });
                    $("#edit_load_img").on("change", function () {
                        upload(loadImg, 3);
                    });

                    $(document).ready(function () {
                        $('input[name="edit_load"]').change(function () {
                            if (this.value === '1') {
                                $('#div_edit_load_img').css('display', 'none');
                                $('#edit_file_url').css('display', 'none');
                                $('#div_edit_load_file').css('display', 'block');
                                $('#edit_file_name').css('display', 'block');
                            }
                            else if (this.value === '2') {
                                $('#div_edit_load_file').css('display', 'none');
                                $('#edit_file_name').css('display', 'none');
                                $('#div_edit_load_img').css('display', 'block');
                                $('#edit_file_url').css('display', 'block');
                            }
                        });
                    });
                    $(function () {
                        load = $(" input[name='edit_load']:checked").val();
                        if (load === '1') {
                            $('#div_edit_load_img').css('display', 'none');
                            $('#div_edit_load_file').css('display', 'block');
                        } else if (load === '2') {
                            $('#div_edit_load_file').css('display', 'none');
                            $('#div_edit_load_img').css('display', 'block');
                        }
                    });

                    function upload(file, key) {
                        var fileObj = file.files[0];
                        var formData = new FormData();
                        formData.append('file', fileObj);
                        $.ajax({
                            url: 'upload',
                            type: 'post',
                            contentType: false,
                            data: formData,
                            processData: false,
                            success: function (res) {
                                if (res.code) {
                                    if (key === 1) {
                                        cover_img = res.url;
                                        $('#edit_cove').attr('src', '/' + cover_img);
                                    } else if (key === 2) {
                                        load_file = res.url;
                                        $('#edit_file_url').css('display', 'none');
										 $('#edit_file_name').text(load_file.substr(17, 14));
                                    } else if (key === 3) {
                                        load_img = res.url;
                                        $('#edit_file_url').attr('src', '/' + load_img);
                                        $('#edit_file_url').css('display', 'block');
                                    }else if (key === 4) {
                                        cover1_img = res.url;
                                        $('#edit_cove1').attr('src', '/' + cover1_img);
                                    }
                                } else {
                                    bootbox.alert({title: "系统提示", message: res.msg});
                                }
                            }
                        });
                    }

                    function but() {
                        var name = $('#edit_name').val();
                        var time = $('#edit_time').val();
                        var price = $('#edit_price').val();
                        var load = $(" input[name='edit_load']:checked").val();
                        var pattern = $("input[name='edit_pattern']:checked").val();
                        if (load === '1') {
                            fileUrl = load_file;
                        } else {
                            fileUrl = load_img;
                        }
                        if (name !== '' && time !== '' && price !== '' && load !== '' && pattern !== '') {
                            $.post('data', {
                                name: name,
                                ontime: time,
                                pattern: pattern,
                                cover: cover_img,
                                cover1: cover1_img,
                                price: price,
                                fileurl: fileUrl,
                                download: load,
                                key: 'edit',
                                id: res.id
                            }, function (res) {
                                if (res.code) {
                                    bootbox.alert({title: "系统提示", message: res.msg});
                                    setTimeout(function () {
                                        location.reload();
                                    }, 2000)
                                } else {
                                    bootbox.alert({title: "系统提示", message: res.msg});
                                }
                            })
                        } else {
                            bootbox.alert({title: "系统提示", message: '请填入完整的信息'});
                        }
                    }
                });

            } else if (event === 'auth') {
                window.location.href = "user_list.html?id=" + id + '&type=1';
            } else if (event === 'del') {
                $.post('data', {id: id, key: 'del'}, function (res) {
                    if (res.code) {
                        bootbox.alert({title: "系统提示", message: res.msg});
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        bootbox.alert({title: "系统提示", message: res.msg});
                    }
                })
            }
        }

        $(".check-all").click(function () {
            $(".uids").prop("checked", this.checked);
        });

        $(".uids").click(function () {
            var option = $(".ids");
            option.each(function (i) {
                if (!this.checked) {
                    $(".check-all").prop("checked", false);
                    return false;
                } else {
                    $(".check-all").prop("checked", true);
                }
            });
        });

        $("#submit").click(function () {
            bootbox.dialog({
                message: '是否删除所选项目',
                title: "系统提示",
                buttons: {
                    success: {
                        label: "关闭",
                        className: "btn-danger",
                        callback: function () {
                        }
                    },
                    "Danger": {
                        label: "删除",
                        className: "btn-success",
                        callback: function () {
                            arr = [];
                            $.each($('.uids:checkbox'), function () {
                                if (this.checked) {
                                    arr.push($(this).val());
                                }
                            });
                            str = arr.join(',');
                            if (arr.length > 0) {
                                $.post('data', {id: str, key: 'dels'}, function (res) {
                                    if (res.code) {
                                        bootbox.alert({title: "系统提示", message: res.msg});
                                        setTimeout(function () {
                                            location.reload();
                                        }, 2000)
                                    } else {
                                        bootbox.alert({title: "系统提示", message: res.msg});
                                    }
                                })
                            }
                        }
                    }
                }
            });
        });

        $('#like').click(function () {

            like = $('#like_code').val();

            window.location.href = '{:U("Dxadmin/project/data")}?like=' + like;

        })

    </script>

</block>